<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<!-- 引入 echarts.js -->
		
		<script type="text/javascript" src="../js/echarts.js" ></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width:1000px;height:600px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));;

			var times = []; //（实际用来盛放X轴坐标值）
			var tems = []; //（实际用来盛放Y坐标值）
			var hums = [];
			var flag = 0;
			function ajax() {				
				$.ajax({
					url: "http://192.168.12.240:8080/onlineTemperature/selectByOnLineTemperature",
					data:{
						deviceId:21012553
					},
					success: function(result) {
					//  console.log(result)
					result = result.reverse();
					if(times.length == 0 && hums.length == 0 && tems.length == 0){
					  for(var r in result){//times,hum					  	
					  		times.push(result[r].times)
					  		tems.push(result[r].tem)
					  		hums.push(result[r].hum)
					  	}
					  
					  }else {
					  		times.splice(0,10);
							tems.splice(0,10);
							hums.splice(0,10);
						for(var r in result){//times,hum					  	
					  		times.push(result[r].times)
					  		tems.push(result[r].tem)
					  		hums.push(result[r].hum)
					  	}
					  }
					  if(flag == 0){flag = 1;}					  
					  console.log("开始绘制")
					  myChart.setOption(optionThree);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						console.log(XMLHttpRequest.status); //200
						console.log(XMLHttpRequest.readyState); //4
						console.log(textStatus); //parseerror
					}
				});

			}
			
					
			
			// 指定图表的配置项和数据

			var colors = ['#5793f3', '#d14a61', '#675bba'];

			optionThree = {
				title: {
					text: '折线图堆叠'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['温度', '湿度']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: times
				},
				yAxis: {
					type: 'value',
					axisLabel:{
						formatter:'{value}(℃/％)'
					}
				},
				series: [{
						name: '温度',
						type: 'line',
						stack: '总量',
						smooth:0.3,
						data: tems
					},
					{
						name: '湿度',
						type: 'line',
						stack: '总量',
						data: hums
					}
				]
			};

			window.onload = function() {
			//	console.log("111")
				ajax();				
//				console.log(tems)
//				console.log(hums)
				console.log(times)				
							
			window.setInterval(function(){					
					ajax();					
//					myChart.setOption(optionThree);
//					times.splice(0,10);
//					tems.splice(0,10);
//					hums.splice(0,10);
//					console.log(times)
				}, 3000);
}				
			
			
			
			
//		    window.onload = function(){
//		    	console.log(times)
//		    	myChart.setOption(optionThree);
//		    }
//			var optionTwo = {
//				title: {
//					text: 'Beijing AQI'
//				},
//				tooltip: {
//					trigger: 'axis'
//				},
//				xAxis: {
//					data: names
//				},
//				yAxis: {
//					splitLine: {
//						show: false
//					}
//				},
//				toolbox: {
//					left: 'center',
//					feature: {
//						dataZoom: {
//							yAxisIndex: 'none'
//						},
//						restore: {},
//						saveAsImage: {}
//					}
//				},
//				dataZoom: [{
//					startValue: 'aaa'
//				}, {
//					type: 'inside'
//				}],
//				visualMap: {
//					top: 10,
//					right: 10,
//					pieces: [{
//						gt: 100,
//						lte: 200,
//						color: '#096'
//					}, {
//						gt: 200,
//						lte: 300,
//						color: '#ffde33'
//					}, {
//						gt: 300,
//						lte: 500,
//						color: '#ff9933'
//					}, {
//						gt: 500,
//						lte: 800,
//						color: '#cc0033'
//					}, {
//						gt: 800,
//						lte: 1000,
//						color: '#660099'
//					}, {
//						gt: 1200,
//						color: '#7e0023'
//					}],
//					outOfRange: {
//						color: '#999'
//					}
//				},
//				series: {
//					name: '???',
//					type: 'line',
//					data: nums,
//					markLine: {
//						silent: true,
//						data: [{
//							yAxis: 200      
//						}, {
//							yAxis: 400
//						}, {
//							yAxis: 600
//						}, {
//							yAxis: 900
//						}, {
//							yAxis: 1100
//						}]
//					}
//				}
//			}

//			var option = {
//				xAxis: {
//					type: 'category',
//					data: names
//				},
//				yAxis: {
//					type: 'value'
//				},
//				series: [{
//					data: nums,
//					type: 'line'
//				}]
//			};
			var i = 0;
			var testI = 3;
			
			function setOptions() {
				if(i < 500) {
					names.push('a' + i);
					nums.push(((Math.random() * 10 + 1) * 10));
					numss.push(((Math.random()*10+2)*6) );
					//			if(i > 20){
					//				names.splice(0,1);
					//				nums.splice(0,1);
					//				}
					
				if(i > 20){	
					names.shift();
					nums.shift();
					numss.shift();
				}
					myChart.setOption(optionThree);
//					myChart.setOption({
//						series: [{
//							name: '温度',
//							type: 'line',
//							stack: '总量',
//							data: nums
//						},
//						{
//							name: '湿度',
//							type: 'line',
//							stack: '总量',
//							data: numss
//						}]
//						});
					//document.getElementById("main").style.width=600+i*100+"px";
					i++;
					//console.log(i)
				} else {
					window.clearTimeout(t1);
				}
			}

			//使用刚指定的配置项和数据显示图表。
			//var t1 = window.setInterval("setOptions()", 1000);
			//	window.onload = function(){	
			//		var date1= new Date();  //开始时间
			//		while(true){
			//			//if(i%2 == 0){
			//					names.push('a'+i);
			//			 		nums.push((Math.random()*10+1)*10);
			//			 		numss.push((Math.random()*10+2)*6);
			////				}else{
			////			 		names.push('a'+i);
			////			 		nums.push((Math.random()*10+1)*100);
			////			    }		
			//			i++;	
			//			if(i>100){
			//				//alert("停止"+names[400]);
			//				break;
			//			}
			//			}		
			//		myChart.setOption(optionThree);
			//		var date2 = new Date();
			//		var date3 = date2.getTime() - new Date(date1).getTime(); 
			//		alert(date3);
			//		}

			//		window.onload = function(){
			//			 myChart.setOption(optionTwo);
			//		}
			/*window.onload = function(){
				document.getElementById("main").style.width=600+testI*100+"px";
			}
			myChart.setOption(option);*/
		</script>
	</body>

</html>